<template>
    <div>
        <div v-for="item in orders" style="margin: 10px;border-radius: 5px;background-color: #fff;padding: 15px 0;">
            <div class="container-fluid">
                <div class="row" style="margin-bottom: 15px;position: relative">
                    <div class="col-xs-6">订单号：{{item.order_no}}</div>
                    <div class="col-xs-6">
                        <span v-if="item.agent_receipt_confirm == 0"
                              style="position: absolute;right: 0;background-color: rgb(238, 238, 238);border-radius: 12px 0 0 12px;line-height: 24px;padding-left: 16px;">状态:待卖家收款</span>
                        <span v-if="item.agent_receipt_confirm == 1"
                              style="position: absolute;right: 0;background-color: rgb(238, 238, 238);border-radius: 12px 0 0 12px;line-height: 24px;padding-left: 16px;">状态:已确认收款</span>
                    </div>
                </div>
                <div class="row" style="margin-bottom: 15px;">
                    <div class="col-xs-6">
                        <img style="width: 100%;" :src="item.collection_image">
                    </div>
                    <div class="col-xs-6" style="text-align: right;">
                        <p style="color: gray">时间:{{item.order_time}}</p>
                        <p style="color: rgb(214, 111, 84);"><span class="label label-warning"
                                                                   style="margin-right: 5px;">字画墨宝</span>{{item.collection_name}}
                        </p>
                        <p><span style="color: rgb(214, 111, 84);font-weight: bold;font-size: 16px;">￥{{item.order_price}}</span>
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-5" style="padding: 0;text-align: center">
                        <p v-if="item.buyer_pay_confirm == 1" style="font-weight: bold;">买家已确认支付</p>
<!--                        <button v-if="item.agent_receipt_confirm == 1"-->
<!--                                style="width: 50%;border: none;background-color: rgb(214, 111, 84);color: #fff;text-align: center;border-radius: 5px;line-height: 30px;">-->
<!--                            投诉订单-->
<!--                        </button>-->

                    </div>
                    <div class="col-xs-7" style="text-align: right">
                        <button v-if="item.is_reject == 1 && item.agent_receipt_confirm == 0" @click="viewMemo(item.memo)"
                                style="border: none;background-color: rgb(214, 111, 84);color: #fff;text-align: center;border-radius: 5px;line-height: 30px;">
                            查看驳回
                        </button>
                        <button v-if="item.buyer_pay_confirm == 1 && item.is_reject == 0 && item.agent_receipt_confirm == 0" @click="postPaymentReject(item)"
                                style="border: none;background-color: rgb(214, 111, 84);color: #fff;text-align: center;border-radius: 5px;line-height: 30px;">
                            驳回订单
                        </button>
                        <button v-if="item.agent_receipt_confirm == 0" @click="postPaymentReceipt(item)"
                                style="border: none;background-color: rgb(214, 111, 84);color: #fff;text-align: center;border-radius: 5px;line-height: 30px;">
                            确认收款
                        </button>
<!--                        <p v-if="item.agent_receipt_confirm == 1" style="font-weight: bold;font-size: 16px;">已确认收款</p>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import swal from 'sweetalert';

    export default {
        name: 'TabOrderReceipts',
        data() {
            return {
                orders: [
                    // {
                    //     // id: '',
                    //     // order_price: '',
                    //     // order_time: '',
                    //     // order_no: '',
                    //     // agent_name: '',
                    //     // agent_contract: '',
                    //     // collection_name: '',
                    //     // collection_status_text: '',
                    //     // order_status: '',
                    // }
                ]
            }
        },
        created() {
        },
        mounted() {
            this.getOrders();
        },
        methods: {
            getOrders() {
                let that = this;
                this.api.getOrders(2).then(res => {
                    if (res.data) {
                        that.orders = res.data;
                    }
                })
            },
            postPaymentReceipt(item) {
                swal({
                    title: "温馨提示",
                    text: "是否确认收款，收款后不可撤销",
                    // icon: "warning",
                    buttons: ["取消", "确认"],
                    dangerMode: true,
                }).then((f) => {
                    if (f) {
                        this.api.postPaymentReceipt(item.id).then(res => {
                            swal(res.meta.msg);
                            if (res.meta.code == '000') {
                                item.agent_receipt_confirm = 1;
                            }
                        });
                    }
                });
            },
            postPaymentReject(item) {
                swal("驳回原因", {
                    content: "input",
                }).then((value) => {
                    if (value) {
                        this.api.postPaymentReject(item.id, value).then(res => {
                            swal(res.meta.msg);
                            if (res.meta.code == '000') {
                                item.is_reject = 1;
                                item.memo = value;
                            }
                        });
                    }
                });
            },
            viewMemo(memo) {
                swal('驳回原因', memo);
            }
        },
    }
</script>
<style scoped>


</style>
